<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>08-v-pre&v-cloak&v-once </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <h1>08-v-pre&v-cloak&v-once </h1>
    <a href="../index.html">返回</a>
    <hr />
    <div id="app">
        {{message}}
        <hr/>
        <p>v-pre 不编译内部的vue</p>
        <div v-pre>{{message}}[前面的是不编译的]</div>
        <hr/>
        <p>v-cloak 在vue 渲染完成指定的整个DOM才进行显示，必须和CSS样式一起使用</p>
        <div v-cloak>
            {{message}}
        </div>
        <hr/>
        <p>v-once 第一次DOM时进行渲染，渲染完成后视为静态内容，以后不再渲染</p>
        <div v-once>{{message}}</div>

        <input type="text" v-model="message" />
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            }
        })
    </script>
</body>

</html>